<template>
	<view class="content">
		<u-navbar title="我的家人"  :autoBack="true">
			</u-navbar>
		<view class="search">
			<u-search searchIconSize="28" bgColor="#fff" placeholder="输入姓名进行搜索" height="52" shape="square"
				v-model="paramsData.name" @search="search" :showAction="false"></u-search>
		</view>
		<view style="border-radius: 24px;
    background-color: #E6EDF5;padding: 3px 4px">
			<u-tabs @click="changeTab" :list="levellist" keyName="level_name" lineWidth="30" lineColor="transparent"
				:activeStyle="{
				            color: '#fff',
							backgroundColor:'#7677EB',
							borderRadius:'40rpx',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#606266',
				            transform: 'scale(1)'
				        }" itemStyle="font-size:28rpx ">
			</u-tabs>
		</view>
		<!-- <view class="nav">
			<view v-for="v,i in levellist" :key="v.id" class="s1" :class='{active: type == i}' @click='setType(i)'>
				{{v.level_name}}</view>

		</view> -->

		<view class="container">
			<view class="main">
				<template v-if="list.length">
					<view class="user" v-for="v in list" :key="v.id" @click="goDetail(v)">
						<view class="left">
							<view class="avatar">
								<u--image :showLoading="true" :src="v.user.avatar_fullurl" width="120rpx" shape="circle"
									height="120rpx"></u--image>
							</view>
							<view class="name">
								<view class="name_1">
									<view class="name_1_1">{{v.realname||'-'}}</view>
									<view class="name_1_2">{{v.level.level_name}}</view>
								</view>
								<view class="user_id">
									<view>电话：</view>
									<view>{{v.partner_account}}</view>
								</view>
								<view class="time">
									{{$u.timeFormat(v.createtime*1000, 'yyyy-mm-dd')}}

								</view>
							</view>
						</view>
						<!-- <view class="right">
							<view class="num">{{v.total_achievement}}</view>
							<view class="text">总业绩</view>
						</view> -->
					</view>
				</template>
				<view class="empty" v-else>
					<u-empty mode="list" text="暂无成员"></u-empty>
				</view>
				<u-loadmore line v-if="list.length&&list.length==total" status="nomore" nomore-text="没有更多了" />
			</view>
		</view>




		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	import {
		partner_levels_api,
		partner_myteam_list_api
	} from '@/api/second.js'
	export default {
		data() {
			return {
				list: [],
				total: 0,
				paramsData: {
					page: 1,
					name: '',
					level_id: '',
				},
				levellist: []
			};
		},
		onLoad() {

			this.getType()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.paramsData.page += 1
				this.getList()
			}
		},
		methods: {
			goDetail(v) {
				uni.navigateTo({
					url: `/pages/second/memberDetails?id=${v.id}`
				})
			},
			getType() {
				partner_levels_api().then(res => {
					this.levellist = res.data
					this.levellist.reverse();
					this.levellist.unshift({
						id: '',
						level_name: "全部"
					})
					// this.paramsData.level_id = res.data[0].id
					this.getList(1)
				})
			},
			changeTab(e) {
				console.log(e);
				this.paramsData.page = 1
				this.paramsData.level_id = e.id
				this.paramsData.name = ''

				this.getList(1)
			},
			getList(type = 0) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				partner_myteam_list_api(this.paramsData).then(res => {
					if (type) {
						this.list = res.data.data
					} else {
						this.list.push(...res.data.data)
					}
					this.total = res.data.total
				}).finally(() => {
					uni.hideLoading()
				})
			},
			search() {
				this.paramsData.page = 1
				this.getList(1)
			},
			setType(type) {
				this.type = type
				this.page = 1;
				this.stop_loading = false;
				this.loadmore();
			},
		}
	}
</script>

<style lang="scss">
	/deep/.u-search__content {
		border-radius: 28rpx !important;
	}

	/deep/.u-tabs__wrapper__nav__item__text {
		padding: 20rpx !important;
		font-size: 28rpx;
	}

	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 10rpx;
	}

	.content {
		min-height: 100vh;
		margin: 0 40rpx;

		.search {
			margin: 40rpx 0;
		}
	}

	::v-deep .u-list {
		height: auto !important;
	}

	.nav {
		@include flex;
		justify-content: space-between;
		height: 84rpx;
		border-radius: 48rpx;
		background-color: #E6EDF5;
		padding: 6rpx 8rpx;
		margin-top: 52rpx;

		.s1 {
			width: 164rpx;
			height: 84rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #0A1629;
			line-height: 84rpx;
			text-align: center;

			&.active {
				background-color: #7677EB;
				color: #FFFFFF;
			}
		}
	}

	.container {
		margin-top: 40rpx;
		padding-bottom: 60rpx;

		.main {
			padding: 52rpx 40rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
		}

		.user {
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 26rpx 0;

			&:first-child {
				padding-top: 0;
			}

			&:last-child {
				padding-bottom: 0;
			}

			.left {
				display: flex;
				align-items: center;

				.avatar {
					margin-right: 12rpx;
				}

				.name {
					.name_1 {
						display: flex;
						align-items: center;

						.name_1_1 {
							font-size: 28rpx;
							font-weight: 400;
							color: #000000;
						}

						.name_1_2 {
							margin-left: 22rpx;
							height: 32rpx;
							line-height: 32rpx;
							font-size: 20rpx;
							color: #7677EB;
							border-radius: 616rpx 616rpx 616rpx 616rpx;
							opacity: 1;
							border: 1rpx solid #7677EB;
							padding: 0 6rpx;
						}
					}

					.user_id {
						padding: 8rpx 0;
						font-size: 24rpx;
						color: #9E9E9E;
						display: flex;
						align-items: center;
					}

					.time {
						color: #9E9E9E;
						font-size: 24rpx;
					}
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				align-items: center;

				.num {
					font-size: 36rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #7677EB;
				}

				.text {
					font-size: 20rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #91929E;
				}
			}
		}

	}

	.list {
		@include flex(column);
		padding-bottom: 36rpx;

		.item {
			height: 418rpx;
			background-color: #FFF;
			border: 2rpx solid #7677EB;
			padding: 24rpx 22rpx;
			border-radius: 48rpx;
			margin-top: 26rpx;

			.s1 {
				height: 360rpx;
				position: relative;

				image {
					width: 100%;
					height: 360rpx;
					position: absolute;
					border-radius: 24rpx;
				}

				text {
					position: absolute;
					bottom: 0;
					width: 88%;
					padding: 20rpx 6% 0;
					height: 60rpx;
					border-radius: 0 0 24rpx 24rpx;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #31353D 100%);
					font-size: 32rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 600;
					color: #FFFFFF;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.s2 {
				width: 628rpx;
				height: 32rpx;
				margin-top: 24rpx;
				line-height: 32rpx;
				@include flex;
				justify-content: space-between;
				position: relative;
				font-size: 24rpx;

				.c1 {
					@include flex;

					.e1 {
						margin-right: 34rpx;
						color: #9E9E9E;
					}

					.e2 {
						color: #7677EB;
					}
				}

				.c2 {
					color: #9E9E9E;

					.e2 {
						color: #7677EB;
					}
				}
			}
		}
	}

	// .empty {
	// 	position: absolute;
	// 	top: 50%;
	// 	left: 50%;
	// 	transform: translate(-50%, -50%);
	// }

	.take_over {
		width: 566rpx;
		padding: 0 52rpx 52rpx 52rpx;
		background-color: #fff;
		border-radius: 48rpx;

		.s1 {
			width: 100%;
			height: 34rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #7677EB;
			line-height: 34rpx;
			text-align: center;
		}

		.title {
			width: 100%;
			height: 52rpx;
			font-size: 36rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #110202;
			line-height: 52rpx;
			text-align: center;
			margin-top: 16rpx;
		}

		.c1 {
			height: 28rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #7D8592;
			line-height: 28rpx;
			margin-top: 56rpx;
		}

		.c2 {
			width: 566rpx;
			height: 100rpx;
			margin-top: 40rpx;

			/deep/ .u-input {
				height: 98rpx;
				border-radius: 28rpx;
			}
		}
	}


	.but {
		margin-top: 60rpx;
		width: 290rpx;
		height: 96rpx;
		background: #7677EB;
		box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
		border-radius: 28rpx;
		margin: 60rpx auto 0 auto;
		text-align: center;

		text {
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 96rpx;
		}
	}
</style>